<template>
  <n-data-table
      striped
      :columns="columns"
      :data="subscribeStore.data"
      :bordered="true"
      size="small"
      style="width: 100%"
  />
</template>

<script setup lang="ts">
import {h, onMounted, ref} from "vue";
import {MarketService} from "../../../bindings/quant/backend/service";
import {PreferredEntity} from "../../../bindings/quant/backend/entity";
import {Events} from "@wailsio/runtime";
import {useSubscribeStore} from "../../store/subscribe";

const subscribeStore = useSubscribeStore()
const columns = [
  {
    title: "股票代码",
    key: "stock_code"
  },
  {
    title: "股票名称",
    key: "stock_name",
    render(row) {
      return h(
          'span',
          {
            style: {
              fontWeight: "bold",
            }
          },
          row.stock_name
      );
    }
  },
  {
    title: "当前价",
    key: "last_price",
    render(row) {
      return h(
          'span',
          {
            // type: row.last_price > row.last_close ? "error" : "success",

            style: {
              // fontWeight: "bold",
              borderRadius: "4px",
              color: row.last_price > row.last_close ? "red" : "green",
            }
          },
          row.last_price.toFixed(2)
      );
    }
  },
  {
    title: "涨跌幅度",
    key: "rate",
    render(row) {
      return h(
          'span',
          {
            // type: row.rate > 0 ? "error" : "success",

            style: {
              // fontWeight: "bold",
              borderRadius: "4px",
              color: row.rate > 0 ? "red" : "green",
            }
          },
          row.rate == 0 ? row.rate.toFixed(2) : row.rate.toFixed(2) + "%"
      );
    }
  },
  {
    title: "昨日收盘价",
    key: "last_close",
    render(row) {
      return h(
          'span',
          {
            style: {
              fontWeight: "bold",
              color: "gray",
              borderRadius: "4px",
            }
          },
          row.last_close.toFixed(2)
      );
    }
  },
  {
    title: "分数",
    key: "score"
  },
];
let data = ref<PreferredEntity[]>()


const getPreferredStockList = () => {
  MarketService.GetMonitoredList().then((result: PreferredEntity[]) => {
    subscribeStore.data = result
  }).catch((err: Error) => {
    console.log(err)
  })
}

onMounted(() => {
  getPreferredStockList()
  Events.On('monitor_log', (wrapper) => {
    // console.log(wrapper.data[0])
    subscribeStore.data.forEach((item) => {
      if (item.stock_code === wrapper.data[0].stock_code) {
        item.last_price = wrapper.data[0].last_price
        let num = (item.last_price - item.last_close) / item.last_close * 100
        item.rate = Number(num.toFixed(2))
      }
    })
  });
})
</script>


<style scoped>

</style>